<template>
  <div
    id="top-list"
    v-loading="isLoading">
    <top-playlists
      title="官方榜"
      :playlists="officialList"
      :class="{ loading: isLoading }"
      @imgLoad="imgLoad"/>
    <top-playlists
      title="全球榜"
      :playlists="globalList"
      :class="{ hidden: isLoading }"
      @imgLoad="imgLoad"/>
  </div>
</template>

<script>
import TopPlaylists from './childrenCpns/TopPlaylists.vue'
import { debounce } from 'utils'

export default {
  name: 'TopList',
  data () {
    return {
      officialList: [],
      globalList: [],
      currentId: undefined,
      isLoading: true
    }
  },
  components: {
    TopPlaylists
  },
  created () {
    this._getTopList()
    this._getDebounce()
  },
  methods: {
    // 1. 初始化获取歌单列表
    async _getTopList () {
      const result = await this.$http.get('/toplist')
      console.log(result.data)
      if (result.status !== 200 || result.data.code !== 200) {
        return this.$message.info('获取榜单失败')
      }
      // 获取成功

      // 获取官方榜单
      for (let i = 0; i < 5; i++) {
        i < 4 ? (this.officialList.push(result.data.list[i])) : (this.officialList.push(result.data.artistToplist))
      }
      // 获取全球榜
      for (let i = 4; i < result.data.list.length; i++) {
        this.globalList.push(result.data.list[i])
      }
      // 默认确定ID
      this.currentId = this.officialList[1].id
    },
    // 2. 侧边栏歌单被点击
    playlistClick (item) {
      this.currentId = item.id
      this.$refs.playlistDetailRef._getPlaylistDetail()
    },
    // 3. 获取防抖函数
    _getDebounce () {
      this.imgLoadDebounce = debounce(() => {
        this.isLoading = false
      })
    },
    // 3. 图片加载完成, 取消loading
    imgLoad () {
      // this.imgLoadDebounce()
      this.isLoading = false
      // 刷新滚动条
      this.$emit('scrollUpdate')
    }
  }
}
</script>

<style scoped lang="less">
#top-list {
  overflow: hidden;
  min-height: 100%;
}
</style>

<style lang="less">
#top-list {
  .el-loading-mask {
    width: 100%;
    height: 100%;
    background-color: #fafafa;
  }
}
</style>
